import { Card } from "antd";
import { ProForm } from "@ant-design/pro-components";
import Keywords from "common/component/Keywords";
import { useRequest } from "ahooks";
import useUrlState from '@ahooksjs/use-url-state';
import ComposeChart from "@/components/ComposeChart";
import { evaluationV1ControllerBatchTitle } from "@/services/auto/evaluation";
import SizeLogic from "@/pages/pure/evaluation-diff/SizeLogic";
import { useRef } from "react";

export default function EvaluationDiff({ diffItemDeletable = false }: { diffItemDeletable?: boolean }) {
    const [urlState, setUrlState] = useUrlState<{
        evaluationUuids?: string;
        evaluationComposeUuids?: string;
        eqUuids?: string;
        projectUuids: string;
    }>();

    const [form] = ProForm.useForm();

    const { data: titleData } = useRequest(() => {
        return evaluationV1ControllerBatchTitle({
            evaluationUuids: urlState.evaluationUuids,
            evaluationComposeUuids: urlState.evaluationComposeUuids,
            eqUuids: urlState.eqUuids,
        })
    }, {
        refreshDeps: [urlState.evaluationUuids, urlState.evaluationComposeUuids, urlState.eqUuids],
        onSuccess: (res) => {
            form.setFieldsValue({
                titles: res.map(item => {
                    return {
                        value: item.title,
                        key: item.uuid,
                    }
                }),
            })
        }
    });

    const containerRef = useRef<HTMLDivElement>(null);

    return <div className="center-container py-[16px]" ref={containerRef}>
        {window.top !== window && <SizeLogic elementRef={containerRef} />}
        <Card className="mb-[16px]">
            <ProForm form={form} submitter={false} layout="horizontal">
                <ProForm.Item name="titles" label="对比设备" className="mb-0">
                    <Keywords<{ value: string; key: string }>
                        min={1}
                        disableAdd
                        disableDelete={!diffItemDeletable}
                        onChange={(value) => {
                            const evaluationUuidsArr = titleData?.filter(item => item.belong === 'evaluation' && value.some(it => it.key === item.uuid)).map(item => item.uuid);
                            const evaluationComposeUuidsArr = titleData?.filter(item => item.belong === 'evaluationCompose' && value.some(it => it.key === item.uuid)).map(item => item.uuid)
                            const eqUuidsArr = titleData?.filter(item => item.belong === 'eq' && value.some(it => it.key === item.uuid)).map(item => item.uuid)
                            setUrlState(origin => {
                                return {
                                    ...origin,
                                    evaluationUuids: evaluationUuidsArr?.length ? evaluationUuidsArr.join(',') : undefined,
                                    evaluationComposeUuids: evaluationComposeUuidsArr?.length ? evaluationComposeUuidsArr.join(',') : undefined,
                                    eqUuids: eqUuidsArr?.length ? eqUuidsArr.join(',') : undefined,
                                }
                            })
                        }} />
                </ProForm.Item>
            </ProForm>
        </Card>
        <ComposeChart
            evaluationUuids={urlState.evaluationUuids?.split(',')}
            evaluationComposeUuids={urlState.evaluationComposeUuids?.split(',')}
            eqUuids={urlState.eqUuids?.split(',')}
            projectUuids={urlState.projectUuids?.split(',')}
        />
    </div>


}
